<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 提示区域 -->
			<el-alert title="消息提示的文案" type="info" show-icon :closable="false" center></el-alert>
			<!-- 进度条区域 -->
			<el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center	>
				<el-step title="基本信息"></el-step>
				<el-step title="商品参数"></el-step>
				<el-step title="商品属性"></el-step>
				<el-step title="商品图片"></el-step>
				<el-step title="商品内容"></el-step>
				<el-step title="完成"></el-step>
			</el-steps>
			<!-- Tab栏区域 -->
				<!-- 注意el-tab-pane直系父标签必须是el-tabs因此form需要加在外面 -->
				<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
					<el-tabs tab-position="left" v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClick">
						<!-- 基本信息 -->
						<el-tab-pane label="基本信息" name="0">
							 <el-form-item label="商品名称" prop="goods_name">
								<el-input v-model="addForm.goods_name"></el-input>
							</el-form-item>
							 <el-form-item label="商品价格" prop="goods_price">
								<el-input v-model.number="addForm.goods_price" type="number" step="0.1"></el-input>
							</el-form-item>
							 <el-form-item label="商品重量" prop="goods_weight">
								<el-input v-model.number="addForm.goods_weight" type="number" step="0.1"></el-input>
							</el-form-item>
							 <el-form-item label="商品数量" prop="goods_number" type="number">
								<el-input v-model.number="addForm.goods_number"></el-input>
							</el-form-item>
							<!-- 级联选择器 -->
							 <el-form-item label="商品分类" prop="goods_cat">
								<el-cascader v-model="addForm.goods_cat" :options="cateList" :props="cateProps" @change="handleChange">
								</el-cascader>
							 </el-form-item>
						</el-tab-pane>
						<!-- 动态参数 -->
						<el-tab-pane label="商品参数" name="1">
						<el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
							<el-checkbox-group v-model="item.attr_vals">
    						<el-checkbox :label="item2" v-for="item2 in item.attr_vals" :key="item2.index2" border></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						</el-tab-pane>
						<!-- 静态属性 -->
						<el-tab-pane label="商品属性" name="2">
							<el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
								<el-input v-model="item.attr_vals"></el-input>
							</el-form-item>
						</el-tab-pane>
						<!-- 图片上传 -->
						<el-tab-pane label="商品图片" name="3">
							<!-- action为必选参数，上传到的后台API地址 -->
							<el-upload :action="upload"	:on-preview="handlePreview"	:on-remove="handleRemove"	list-type="picture" :headers="headerObj" :on-success="handleSuccess">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-tab-pane>
						<!-- 商品内容描述 -->
						<el-tab-pane label="商品内容" name="4">
							<!-- 引入第三方富文本编辑器插件 -->
						 <quill-editor v-model="addForm.goods_introduce" @blur="onEditorBlur"/>
						 <!-- 添加商品的按钮 -->
						 <el-button type="primary" @click="add">添加商品</el-button>
						</el-tab-pane>
					</el-tabs>
				</el-form>
		</el-card>
		<!-- 图片预览区域 -->
		<el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%" @close="previewDialogClose">
			<img :src="previewUrl" alt="" class="previewImg">
		</el-dialog>
	</div>
</template>

<script>
// 导入深拷贝的插件（官方提倡以下划线命名）
import _ from 'lodash'

export default {
	data(){
		return {
			// 选项卡选中状态(同时也为tab切换对应的状态)
			activeIndex:'',
			// 添加商品的数据收集
			addForm:{
				goods_name:'',
				goods_price:0,
				goods_weight:0,
				goods_number:0,
				goods_cat:[],
				pics:[],
				goods_introduce:'',
				attrs:[]
			},
			// 添加商品信息的规则
			addFormRules:{
				goods_name:[
					{required: true,message: '请输入商品名称',trigger: 'blur'}
				],
				goods_price:[
					{required: true,message: '请输入商品价格',trigger: 'blur'}
				],
				goods_weight:[
					{required: true,message: '请输入商品重量',trigger: 'blur'}
				],
				goods_number:[
					{required: true,message: '请输入商品数量',trigger: 'blur'}
				],
				goods_cat:[
					{required: true,message: '请选择商品分类',trigger: 'blur'}
				]
			},
			// 分类信息
			cateList:[],
			// 级联选择器配置关系
			cateProps:{
				expandTrigger:'hover',
				label:'cat_name',
				value:'cat_id'
			},
			// 动态参数的数据（后期会提取参数内容到addForm中）
			manyTableData:[],
			// 动态参数的数据（后期会提取参数内容到addForm中）
			onlyTableData:[],
			// 图片上传后台地址
			upload:'http://timemeetyou.com:8889/api/private/v1/upload',
			// 图片上传的请求头对象(注意element-ui内部upload不经过aixos请求，因此没有使用我们之前请求拦截加的请求头，此处要单独手动加)
			headerObj:{
				Authorization:window.sessionStorage.getItem('token')
			},
			// 控制预览图的显示和隐藏
			previewDialogVisible:false,
			// 预览图片的地址
			previewUrl:''
		}
	},
	created(){
		this.getCateList()
	},
	methods:{
		// 获取分类信息
		async getCateList(){
			const{data: res} = await this.$http.get('categories')
			if(res.meta.status !== 200){
				return this.$message.error('分类信息获取失败')
			}
			this.cateList = res.data
			console.log(this.cateList);
		},
		// 级联选择器选择时触发
		handleChange(){
			console.log(this.addForm.goods_cat);
			// 必须选择三级分类
			if(this.addForm.goods_cat.length !== 3){
				this.addForm.goods_cat = []
			}
		},
		// 点击tab栏切换离开前，切换前触发事件(传递两个参数)
		beforeTabLeave(activeName,oldActiveName){
			// console.log('新：' + activeName);
			// console.log('佬：' + oldActiveName);
			// 如果分类没有选择第三级别则不允许跳转到其他tab项
			if(oldActiveName === '0' && this.addForm.goods_cat.length !== 3){
				// 提示
				this.$message.error('请先选择商品分类')
				// 阻止跳转
				return false
			}
		},
		// 点击tab栏切换触发事件
		async tabClick(){
			// 如果activeIndex为1表示切换到商品参数
			if(this.activeIndex === '1'){
				// 请求商品参数（动态）信息
				const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel: 'many'}})
				if(res.meta.status !== 200){
					return this.$message.error('参数信息获取失败')
				}
				this.manyTableData = res.data
				// 把manyTableData内的attr_vals值转为数组，用来渲染
				this.manyTableData.forEach(item => {
					item.attr_vals = item.attr_vals !== '' ? item.attr_vals.split(',') : []
				})
				// console.log(this.manyTableData);
			}else if(this.activeIndex === '2'){
				// 如果activeIndex为2表示切换到静态属性
				const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel: 'only'}})
				if(res.meta.status !== 200){
					return this.$message.error('参数信息获取失败')
				}
				this.onlyTableData = res.data
				// console.log(this.onlyTableData);
	
			}
		},
		// 处理图片预览图效果
		handlePreview(file){
			console.log(file);
			// 提取预览图路径
			this.previewUrl = file.response.data.url
			// 显示图片
			this.previewDialogVisible = true
		},
		// 处理移除图片的效果
		handleRemove(file, fileList){
			// 点击移除图片之后，需要把添加到addForm.pic的图片路径属性信息删除
			// 1、提取文件的图片路径
			const filePath = file.response.data.tmp_path
			// console.log(file);
			// 2、在addForm的pics中查找对应的索引号
			const i = this.addForm.pics.findIndex(item => {
				item.pic === filePath
			})
			// 3、删除对应的元素
			this.addForm.pics.splice(i,1)
			// console.log(this.addForm);
		},
		// 文件上传成功调用的事件
		handleSuccess(response, file, fileList){
			console.log(response);
			if(response.meta.status !== 200){
				return this.$message.error('图片上传失败')
			}
			const picInfo = {
				pic: response.data.tmp_path
			}
			// 把上传的图片信息追加到添加到addForm.pic中
			this.addForm.pics.push(picInfo)
			// console.log(this.addForm);
		},
		// 关闭预览图对话框是清空数据
		previewDialogClose(){
			this.previewUrl = ''
		},
		// 富文本编辑器失去焦点触发
		onEditorBlur(quill){
			// 关于会携带p标签的问题等下解决
			// console.log(quill);
			// console.log(this.addForm);
		},
		// 点击添加商品，完成商品的添加
		add(){
			// 1、预校验
			this.$refs.addFormRef.validate(async valid => {
				if(!valid) {
					return this.$message('请把各项内容输入完成')
				}
				// 2、执行添加前转换业务
					// (1)、处理级联选择器id,要求为字符串
					// 引入深拷贝处理
					// console.log(this.addForm);
					const form = _.cloneDeep(this.addForm)
					form.goods_cat = form.goods_cat.join(',')
					// console.log(form);
					// (2)、处理动态属性
					// console.log(this.manyTableData);
					this.manyTableData.forEach(item => {
						const newInfo = {
							attr_id: item.attr_id,
							attr_value: item.attr_vals.join(',')
						}
						// 添加到addForm的attrs中
						this.addForm.attrs.push(newInfo)
					})
					// console.log(this.addForm);
					// (3)、处理静态属性(内部attr_vals之前未处理依旧是字符串)
					console.log(this.onlyTableData)
					this.onlyTableData.forEach(item => {
						const newInfo = {
							attr_id: item.attr_id,
							attr_value: item.attr_vals
						}
						// 添加到addForm的attrs中
						this.addForm.attrs.push(newInfo)
					})
					// (4)、把addForm中attrs值赋值给form.attrs
					form.attrs = this.addForm.attrs
					// console.log(form);
				// 3、发送添加请求
				// 此处需要注意的在基础数据中单价数量重量的v-model后加number，因为input接收的数据会转为字符串的
				const {data: res} = await this.$http.post('goods',form)
				console.log(res);
				console.log(form);
				if(res.meta.status !== 201){
					return this.$message.error('商品添加失败')
				}
				this.$message.success('商品添加成功')
				this.$router.push('/goods')
			})
		}
	},
	computed:{
		// 分类id
		cateId(){
			if(this.addForm.goods_cat.length === 3){
				return this.addForm.goods_cat[2]
			}else{
				return null
			}
		}
	}
}
</script>

<style lang="less" scoped>
	.el-steps{
		margin: 10px 0;
	}
	.el-checkbox{
		margin: 0 10px 0 0 !important;
	}
	.previewImg{
		width: 100%;
	}
	.quill-editor{
		height: 300px;
		margin: 0 0 20px 0;
	}
	// 此处单独写改样式不起作用，因此用了穿透
	.quill-editor /deep/ .ql-container{
		height: 80% !important;
	}
</style>